<template>
	<view class="app">
		<z-paging
			show-refresher-when-reload
			show-refresher-update-time
			v-model="shifuList"
			ref="paging"
			:auto="false"
			@query="queryList"
		>
			<view class="top" slot="top">
				<view class="types">
					<view class="type" :class="{ sel: keyValue.cate === 1 }" @tap="change(1)">
						<image
							class="icon"
							:src="require('@/static/shifu/cate-1-' + keyValue.cate + '.png')"
						></image>
						<text style="margin-left: 8rpx">上门按摩</text>
					</view>
					<view class="type" :class="{ sel: keyValue.cate === 2 }" @tap="change(2)">
						<image
							class="icon"
							:src="require('@/static/shifu/cate-2-' + keyValue.cate + '.png')"
						></image>
						<text style="margin-left: 14rpx">助娱向导</text>
					</view>
				</view>
				<scroll-view scroll-x class="projs" v-if="projects.length > 0">
					<view
						v-for="i in projects"
						class="proj"
						:key="i._id"
						:class="{ sel: keyValue.pid === i._id, sht: i.title.length <= 5 }"
						@tap="change2(i._id)"
					>
						<image mode="aspectFill" class="thumb" :src="i.thumb"></image>
						<text class="text">{{ i.title }}</text>
					</view>
				</scroll-view>
				<view class="sorts">
					<view class="sort" @tap="jumpAddress">
						<text>{{ keyValue.location }}</text>
						<u-icon name="arrow-down" size="22"></u-icon>
					</view>
					<view class="sort" :class="{ sel: keyValue.sold }" @tap="change3">
						<text>销量</text>
						<u-icon name="arrow-down" size="22"></u-icon>
					</view>
					<view class="sort" :class="{ sel: keyValue.talk }" @tap="change4">
						<text>评价</text>
						<u-icon name="arrow-down" size="22"></u-icon>
					</view>
				</view>
			</view>
			<block v-for="item in shifuList" :key="item._id">
				<shifu-item
					:info="item"
					:btnText="keyValue.cate === 1 ? '按摩下单' : '助娱下单'"
					@jump="jump"
					@check="check"
				></shifu-item>
			</block>
		</z-paging>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
var that
import shifuItem from "./components/shifu-item"

export default {
	components: { shifuItem },
	data() {
		return {
			// 搜索关键字
			keyValue: { location: "", cate: 1, pid: "", sold: false, talk: false },
			lonlat: null,
			projects: [],
			// 技师列表
			shifuList: []
		}
	},
	onLoad() {
		that = this
		let city = vk.getStorageSync("addr")
		if (city) {
			this.keyValue.location = city
		}
		uni.$on("refreshShifuList", () => {
			this.$refs.paging.refresh()
		})
		uni.$on("cityChange", item => {
			this.keyValue.location = item
			vk.setStorageSync("addr", item)
			this.checkAddress(true)
		})
		this.checkAddress()
	},
	methods: {
		// 地址
		checkAddress(flag) {
			// let isAdr = vk.getStorageSync("isAdr")
			// let canAdr = vk.getStorageSync("canAdr")
			// if (!isAdr && !flag) {
			// 	vk.confirm(
			// 		"我们需要您的定位权限，用于展示城市定位",
			// 		"位置权限使用说明",
			// 		"去授权",
			// 		"取消",
			// 		r => {
			// 			vk.setStorageSync("isAdr", true)
			// 			if (r.confirm) {
			// 				vk.setStorageSync("canAdr", true)
			// 				this.startLocat()
			// 			} else {
			// 				vk.setStorageSync("canAdr", false)
			// 				vk.alert("您已经取消了定位授权，将会展示默认城市")
			// 				this.keyValue.location = "六安市"
			// 				this.queryProjs()
			// 			}
			// 		}
			// 	)
			// } else if (canAdr) {
			this.startLocat()
			// } else {
			// 	this.keyValue.location = "六安市"
			// 	this.queryProjs()
			// }
		},
		startLocat() {
			let city = vk.getStorageSync("addr")
			//#ifdef H5
			vk.showLoading("获取中...")
			uni.getLocation({
				type: "gcj02",
				success: async res => {
					if (!res.longitude) return vk.alert("定位失败，请稍后重试~")
					vk.callFunction({
						url: "client/pub.getH5City",
						title: "请求中...",
						data: { lonlat: [res.longitude, res.latitude] }
					}).then(re => {
						if (!city) {
							vk.setStorageSync("addr", re.city)
							this.keyValue.location = re.city
						} else {
							this.keyValue.location = city
						}
						vk.setStorageSync("adr", [res.longitude, res.latitude])
						this.lonlat = [res.longitude, res.latitude]
						this.queryProjs()
					})
				},
				fail: () => {
					vk.hideLoading()
					vk.alert("定位失败，请稍后重试~")
					this.queryProjs()
				}
			})
			//#endif
			//#ifdef APP-PLUS
			uni.getLocation({
				type: "gcj02",
				geocode: true,
				success: async res => {
					if (!res.address) return vk.alert("定位失败，请稍后重试~")
					if (!city) {
						vk.setStorageSync("addr", res.address.city)
						this.keyValue.location = res.address.city
					} else {
						this.keyValue.location = city
					}
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					this.lonlat = [res.longitude, res.latitude]
					this.queryProjs()
				},
				fail: () => {
					vk.alert("定位失败，请稍后重试~")
					this.queryProjs()
				}
			})
			//#endif
		},
		// 切换类型
		change(cate) {
			this.keyValue.cate = cate
			this.keyValue.sold = false
			this.keyValue.talk = false
			this.shifuList = []
			this.queryProjs()
		},
		change2(pid) {
			if (pid === this.keyValue.pid) return
			this.keyValue.pid = pid
			this.$refs.paging.reload()
		},
		change3() {
			this.keyValue["talk"] = false
			this.keyValue["sold"] = !this.keyValue["sold"]
			this.$refs.paging.reload()
		},
		change4() {
			this.keyValue["sold"] = false
			this.keyValue["talk"] = !this.keyValue["talk"]
			this.$refs.paging.reload()
		},
		// 查询项目列表
		queryProjs() {
			const { location, cate } = this.keyValue
			let that = this
			this.keyValue.pid = ""
			this.projects = []
			vk.myfn.callFunctionForCache({
				url: "client/pub.getProjectList",
				loading: { name: "loading", that },
				data: { location, cate },
				success: res => {
					if (res.rows && res.rows.length > 0) {
						this.projects = res.rows
						this.keyValue.pid = res.rows[0]._id
					} else {
						this.$nextTick(() => {
							this.$refs.paging.complete()
						})
					}
				}
			})
		},
		// 查询技师列表
		queryList(pageIndex, pageSize) {
			const { location, cate, pid, sold, talk } = this.keyValue
			const { lonlat } = this
			if (!pid) {
				return this.$refs.paging.complete()
			}
			vk.callFunction({
				url: "client/pub.queryShifu",
				data: { pageIndex, pageSize, location, lonlat, cate, sold, talk, sid: pid },
				success: res => {
					let now = vk.pubfn.timeFormat(new Date(), "hh:mm")
					let arr = res.rows || []
					arr.map(v => {
						const { shifu_time, agent_time, service_time } = v
						for (let i = 0; i < agent_time.length; i++) {
							let t = agent_time[i]
							let a = shifu_time.indexOf(t) === -1
							let b = service_time.indexOf(t) === -1
							if (t > now && a && b) {
								v.near = t
								return
							}
						}
						v.near = "暂无"
					})
					// if (!sold && !talk) {
					// 	arr = arr.sort((a, b) => {
					// 		return a.near > b.near ? 1 : -1
					// 	})
					// }
					this.$refs.paging.complete(arr)
					vk.hideLoading()
				},
				fail: () => {
					vk.hideLoading()
				}
			})
		},
		// 跳转地址
		jumpAddress() {
			uni.navigateTo({ url: `/pages/search/address?city=${this.keyValue.location}` })
		},
		// 搜索
		search() {
			this.$refs.paging.reload()
		},
		// 技师列表操作
		check(item) {
			vk.navigateTo(`/pages/shifu/detail?id=${item._id}`)
		},
		jump(item) {
			vk.navigateTo(`/pages/shifu/service?id=${item._id}`)
		}
	},
	watch: {
		"keyValue.pid": (val, old) => {
			if (val !== old) {
				that.$nextTick(() => {
					that.$refs.paging.reload()
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 50px);
	/* #endif */
	background: linear-gradient(135deg, #eafff8 0%, #e7fcff 100%);
}

.types {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 86rpx 12rpx;
	width: 100%;
	.type {
		width: 258rpx;
		height: 82rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #c8c8c8;
		border-radius: 51rpx;
		box-sizing: border-box;
	}
	.icon {
		width: 58rpx;
		height: 58rpx;
	}
	.sel {
		color: #fff;
		border: none;
		background: url("@/static/shifu/cate-bg-2.png") no-repeat;
		background-size: 100% 100%;
	}
}
.projs {
	padding: 10rpx 0;
	margin: 0 10rpx;
	white-space: nowrap;
	text-align: center;
	.proj {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		position: relative;
		margin: 0 16rpx;
		padding-top: 8rpx;
		.thumb {
			width: 96rpx;
			height: 96rpx;
			border-radius: 48rpx;
		}
		.text {
			margin-top: 14rpx;
			overflow: hidden;
			width: 100%;
			text-align: center;
		}
	}
	.sht {
		margin: 0 26rpx;
	}
	.sel {
		color: #24c388;
		&::after {
			content: "";
			position: absolute;
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
			top: 0;
			border: 2rpx solid #24c388;
		}
	}
}

.sorts {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding: 10rpx 24rpx 24rpx;
	.sort {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		height: 46rpx;
		background-color: #fff;
		box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.08);
		border-radius: 34rpx;
		padding: 0 26rpx 0 30rpx;
		box-sizing: border-box;
	}
	.u-icon {
		margin-left: 6rpx;
	}
	.sel {
		color: #24c388;
		border: 1rpx solid #24c388;
	}
}
</style>
